
<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import pawerSet from '@/components/XtxSku/power-set'

// 商品数据
const goods = ref({})
let pathMap = {}
const getGoods = async () => {
  // 1135076  初始化就有无库存的规格
  // 1369155859933827074 更新之后有无库存项（蓝色-20cm-中国）
  const res = await axios.get('http://pcapi-xiaotuxian-front-devtest.itheima.net/goods?id=1369155859933827074')
  goods.value = res.data.result
  // console.log(goods.value );
 pathMap = getPathMap(goods.value)
  initDisabledStatus(goods.value.specs, pathMap)
}
onMounted( () =>  getGoods())

// 点击事件（通过给数据加selected，根据selected判断是否选中）
const changeSelectedStatus = (item, val) => {
  if(val.disabled) return
  // 如果选中则取消选中
  if(val.selected){
    val.selected =false
  }else{
    // 如果没有选中则先给每一项数据加一个属性selected = false
    item.values.forEach(val => val.selected = false)
    // 给当前点击的改为true
    val.selected =true
  }

  console.log( getSelectedValues(goods.value.specs));
  updateDisabledStatus(goods.value.specs, pathMap)



  // 产出sku对象数据
// 查看当前的数组中是否是全部选完的，如果值为1则是找到了，说明没有选完
const index = getSelectedValues(goods.value.specs).findIndex(item=>item === undefined)  
if(index > -1){
  console.log('没有选完');
}else{
  
  // 获取sku对象
  const key = getSelectedValues(goods.value.specs).join('-')
  const skuObj = goods.value.skus.find(item => item.id === pathMap[key][0])
  console.log(pathMap[key]);
  console.log('选完了可以输出数据',skuObj);
}


}

// 生成有效路径字典对象

const getPathMap = (goods) => {

  const pathMap = {}
  // 1、根据skus字段生成有效的skus数据
  // 过滤调库存是o的sku   （inventory 库存）
  const effectiveSkus = goods.skus.filter(sku => sku.inventory > 0) 
  //2、根据有效的sku使用算法（子级算法）  例：[1,2] => [[1],[2],[1,2]]
  effectiveSkus.forEach(sku=>{
    // 获取匹配的valueName组成的数据（从sku.specs里面只拿出valueName的值作为数组）
    const selectedArr = sku.specs.map(item => item.valueName)
    // 使用算法获取子集（使用算法让数组变成[1,2] => [[1],[2],[1,2]]）
    const valueArrPowerSet = pawerSet(selectedArr)
    valueArrPowerSet.forEach(arr=>{
      // 初始化key 数据join => 字符串 对象的key（利用join把数据中间以-拼接）
      const key = arr.join('-')
         // 如果已经存在当前的key，就往数字中直接添加skuId，如果不存在key 直接做赋值
         if(pathMap[key]){
           pathMap[key].push(sku.id);
         }else{
           pathMap[key] = [sku.id]
         } 
    })
    // console.log('pathMap', pathMap);
  })

  return pathMap
}
// 点击规格更新禁用状态 ---初始化规格禁用
// 思路：遍历每一个规格对象，使用name字段作为key去路径字典pathMap中做匹配，匹配不上则禁用
const initDisabledStatus = (specs, pathMap) => {
// 循环出values中的那么值，并和pathMap的key值进行匹配，如果匹配上则可选择
  specs.forEach(spec=>{
    spec.values.forEach(val=>{
      // 如果再pathMap中找到key值，则disabled = false（这个disabled = false在html中判断，在html中disabled = false则不启用样式）
      if(pathMap[val.name]){
        val.disabled = false
      }else{
        val.disabled = true
      }
    })
  })
}

// 获取选中项的匹配数组
const getSelectedValues = (specs) => {
  const selectedArr = []
  specs.forEach(spec => {
    // 查看spec.values中哪个的selected是true，如果是则返回当前的一组数据
    const selectedVal = spec.values.find(val => val.selected)
    // 如果selectedVal不为空，则找当前组数据中的name,并添加到selectedArr数组中
    selectedArr.push(selectedVal? selectedVal.name : undefined)
  })
  return selectedArr
}

// 切换时更新禁用状态
const updateDisabledStatus = (specs, pathMap) => {
  specs.forEach((item, i) => {
    // 调用获取选中项的匹配数组
    const selectedValues = getSelectedValues(specs)
    item.values.forEach(val => {
      // 把name字段值填充到对应位置
      selectedValues[i] = val.name
      // 过滤掉undefined项，使用join方法形成一个有效的key
      const key = selectedValues.filter(value => value).join('-')
      // 使用key去pathMap中做匹配
      if (pathMap[key]) {
        val.disabled = false
      }else {
        val.disabled = true
      }
    })
  })
}

</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.id">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <!-- :class="{ selected: val.selected }"  如果val中的selected等于true则加上selected样式 -->
          <img :class="{ selected: val.selected, disabled: val.disabled }" @click="$event =>changeSelectedStatus(item, val)" v-if="val.picture" :src="val.picture" :title="val.name">
          <span v-else :class="{ selected: val.selected , disabled: val.disabled}" @click="$event =>changeSelectedStatus(item, val)">{{ val.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="scss">
@mixin sku-state-mixin {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;

  &.selected {
    border-color: #27ba9b;
  }

  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      >img {
        width: 50px;
        height: 50px;
        margin-bottom: 4px;
        @include sku-state-mixin;
      }

      >span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        margin-bottom: 4px;
        @include sku-state-mixin;
      }
    }
  }
}
</style>